<template>
	<view v-show="visible" style="background-color: #FFFFFF;">
		<z-tabs unit="px" ref="tabs" :list="!form.content_id ? ['创建方案', '创建模板'] : [`编辑${!releaseType ? '方案' : '模板'}`]"
			bar-width="0" active-color="#52B36D" inactive-color="#93A097" :current="releaseType" @change="tabsChange"
			:active-style="{height: '40px', 'line-height': '40px', 'text-align': 'center', width: '100%'}"
			:inactive-style="{height: '40px', 'background-color': '#EDF8F0', 'line-height': '40px', 'text-align': 'center', width: '100%'}"
			bottom-space="10" />
		<u--form class="custom-form" labelPosition="left" labelWidth="100" :labelStyle="formLabelStyle" :model="form"
			:rules="rules" ref="uForm" :errorType="!releaseType ? 'toast' : 'none'">
			<view class="Grid Grid--1of2 Grid--center text-center text-sm"
				style="box-sizing: content-box; border-radius: 18px; border: 1px solid #52B36D; height: 35px; line-height: 35px; overflow: hidden; margin-bottom: 10px;">
				<view class="Grid-cell"
					:style="{backgroundColor: form.category_ids[0] == 3 ? '#52B36D' : '#ffffff', color: form.category_ids[0] == 3 ? '#ffffff' : '#52B36D'}"
					@click="() => {
					form.match_info = ''
					form.match_data = ''
					match_data = '请选择系统赛事'
					form.category_ids = [3]
					match_info = '请选择系统赛事'
					form.kuiper_data = []
					category_ids = 3
				}">足球</view>
				<view class="Grid-cell"
					:style="{backgroundColor: form.category_ids[0] == 4 ? '#52B36D' : '#ffffff', color: form.category_ids[0] == 4 ? '#ffffff' : '#52B36D'}"
					@click="() => {
					form.match_info = ''
					form.match_data = ''
					match_data = '请选择系统赛事'
					form.category_ids = [4]
					match_info = '请选择系统赛事'
					form.kuiper_data = []
					category_ids = 4
				}">篮球</view>
			</view>
			<u-form-item v-if="!releaseType" label="方案类别" borderBottom required>
				<view class="Grid Grid--center text-sm custom-select-btn">
					<view :class="['item', {active: form.type == 1}]" @click="form.type = 1">文章</view>
					<view :class="['item', {active: form.type == 2}]" @click="form.type = 2">视频</view>
				</view>
			</u-form-item>
			<u-form-item label="选择赛事" borderBottom required>
				<view class="Grid Grid--center text-sm custom-select-btn">
					<view :class="['item', {active: !is_match_info}]" @click="is_match_info = false">系统赛事</view>
					<view :class="['item', {active: is_match_info}]" @click="is_match_info = true">自定义</view>
				</view>
			</u-form-item>
			<u-form-item v-if="!is_match_info" label="比赛日期" prop="match_date" borderBottom :required="!releaseType">
				<view class="Grid Grid--center text-sm custom-select-btn">
					<view :class="['item', {active: form.match_date == matchDateMap.today}]"
						@click="form.match_date = matchDateMap.today">今天</view>
					<view :class="['item', {active: form.match_date == matchDateMap.tomorrow}]"
						@click="form.match_date = matchDateMap.tomorrow">明天</view>
					<view :class="['item', {active: form.match_date == matchDateMap.the_day_after_tomorrow}]"
						@click="form.match_date = matchDateMap.the_day_after_tomorrow">后天</view>
				</view>
			</u-form-item>
			<u-form-item v-if="!is_match_info" label="赛  事" prop="match_nick" borderBottom :required="!releaseType">
				<view class="Grid Grid--center Grid--justifyCenter" style="width: 100%;">
					<view class="Grid-cell">
						<view :style="{'width': '100%', color: match_info == '请选择系统赛事' ? '#999999' : '#222222'}"
							@click="show = true">{{match_info}}</view>
					</view>
					<view v-if="match_info != '请选择系统赛事'" style="width: 30px;">
						<view class="Grid Grid--center Grid--justifyFlexEnd">
							<u-icon color="rgb(192, 196, 204)" name="close-circle-fill" style="padding: 5px;" @click="() => {
								form.match_info = ''
								form.match_nick = ''
								is_match_info = false
								match_info = '请选择系统赛事'
								historyMatchInfo = {
									match_info: '',
									match_nick: '',
									label: '请选择系统赛事',
									expires_time: '',
									match_time: ''
								}
							}"></u-icon>
						</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item v-if="is_match_info" label="赛事" prop="match_nick" borderBottom :required="!releaseType">
				<view style="width: 100%;">
					<u--textarea v-model="form.match_nick" placeholder="请输入自定义内容" border="none"></u--textarea>
				</view>
			</u-form-item>
			<u-form-item label="标  题" prop="title" borderBottom :required="!releaseType">
				<u--textarea v-model="form.title" placeholder="请输入方案标题" border="none" autoHeight
					placeholderClass="input-placeholder"></u--textarea>
			</u-form-item>

			<u-form-item label="过期时间" prop="expires_time" borderBottom :required="!releaseType">
				<view class="Grid Grid--center Grid--justifyCenter" style="width: 100%;">
					<view class="Grid-cell">
						<view @click="expiresTimeClick" :style="{color: !form.expires_time ? '#999999' : '#222222'}">
							{{form.expires_time || '请设置方案过期时间'}}
						</view>
					</view>
					<view v-if="form.expires_time" style="width: 30px;">
						<view class="Grid Grid--center Grid--justifyFlexEnd">
							<u-icon color="rgb(192, 196, 204)" name="close-circle-fill" style="padding: 5px;" @click="() => {
								datePickerValue = null
								form.expires_time = ''
							}"></u-icon>
						</view>
					</view>
				</view>
				<!-- this.$refs.datetimePicker.innerValue=Number(new Date(item.offShelfDate)) -->
				<u-datetime-picker ref="datetimePicker" :show="datePicker" v-model="datePickerValue"
					:minDate="minDatePickerValue" mode="datetime" @cancel="datePicker = false"
					@confirm="datetimeFormatter"></u-datetime-picker>
			</u-form-item>
			<u-form-item label="所属公众号" prop="wechat_id" borderBottom required>
				<view v-if="form.draft_status" style="width: 100%; color: #222222;" @click="() => {
					showWechat = true;
				}">{{currentWechat.name}}</view>
				<view v-else style="color: #f56c6c;">{{`${currentWechat.name}(方案已发布过不可修改)`}}</view>
			</u-form-item>
			<u-form-item label="屏蔽用户" prop="invisible_ids" borderBottom>
				<view :style="{'width': '100%', color: !form.invisible_ids.length ? '#999999' : '#222222'}" @click="() => {
					query.wechat_id = form.wechat_id
					query.page = 1
					invisibleList = []
					getInvisibleList()
					invisibleShow = true
				}">{{form.invisible_ids.length ? `含[${form.invisible_ids[0].nickname}...] 共${form.invisible_ids.length}人` : `请选择要屏蔽的用户`}}
				</view>
			</u-form-item>
			<u-form-item label="价  格" prop="price" :required="!releaseType">
				<u--input v-model="form.price" type="digit" placeholder="请输入方案价格" border="none" @input="() => {
					let result = priceArray.findIndex((item, index) => {
						return item.value === ((form.price || 0) * 1)
					})
					result !== -1 ? tagIndex = result : tagIndex = ''
					// 处理方案价格为0时,营销工具不可操作
				}"></u--input>
			</u-form-item>
			<u-form-item label=" " borderBottom>
				<view class="Media">
					<view class="Media-body">
						<view class="Grid">
							<view v-for="(item, index) in priceArray" :key="index" @click="() => {
									tagIndex = index
									$set(form, 'price', item.value)
									$refs.uForm.validateField('price')
									// 处理方案价格为0时,营销工具不可操作
								}">
								<custom-tag :item="item" :customClass="index === tagIndex ? 'active' : ''" />
							</view>
						</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="简  介" prop="description" :required="!releaseType">
				<view v-if="form.type == 1">
					<view v-if="form.description" class="custom-scrollbar"
						style="position: relative; height: 240px;  width: 260px; overflow-y: scroll; background-color: #f7f7f7; padding: 10px; border-radius: 5px;"
						@click.stop="handleEditHtml('description')">
						<!-- domain="url" -->
						<mp-html container-style="padding: 0;" :content="form.description || `请编辑方案简介`" lazy-load
							scroll-table selectable use-anchor :tag-style="tagStyle" @load="load" @ready="ready"
							@imgtap="imgtap" @linktap="linktap" />
						<view style="position: absolute; right: 0; bottom: 0; padding: 20px; color: #52B36D;">
							编辑</view>
					</view>
					<view v-else>
						<view style="width: 100%; color: #999999;" @click="handleEditHtml('description')">请编辑方案简介</view>
					</view>
				</view>
				<view v-if="form.type == 2" style="position: relative; width: 260px; overflow-y: scroll; background-color: #f7f7f7; padding: 10px; border-radius: 5px;">
					 <u-textarea v-model="form.description" count :maxlength="50"></u-textarea>
				</view>
			</u-form-item>
			<u-form-item v-if="form.type == 1" label=" " prop="img_url" borderBottom>
				<view style="width: 266px;">
					<dragSort v-if="visible && imgUrlList.length" label="id" :list.sync="imgUrlList" :columnNum="3"
						:columnSpace="10" :rowHeight="160" :rowSpace="10"></dragSort>
					<view class="Grid Grid--center">
						<view
							style="width: 80px; height: 80px; background-color: #f4f5f7; border-radius: 2px; margin: 0 8px 8px 0;">
							<view style="width: 80px; height: 80px;"
								class="Grid Grid--center Grid--justifyCenter press-down-active"
								@click="imgUrlAfterRead('imgUrlList')">
								<u-icon name="camera-fill" size="24"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item v-if="form.type == 2" label="上传视频" prop="vid" borderBottom :required="!releaseType">
				<view @click="handleVid">
					<view style="width: 100%; font-size: 12px;">
						<view class="Grid Grid--center Grid--justifyCenter text-center"
							style="width: 90px; height: 160px; background: #F7F7F7; position: relative;">
							<view v-if="form.vid">
								<u--image style="display: inline-block;" :showLoading="true" mode="aspectFill" src="https://code-app.oss-cn-beijing.aliyuncs.com/other/60.png" width="28px"
									height="17px"></u--image>
								<view style="color: #52B36D; padding: 4px 0;">上传成功</view>
							</view>
							<view v-if="!form.vid">
								<u-icon name="plus" style="margin: 0 auto; display: inline-block;"></u-icon>
								<view style="color: #999999; padding: 4px 0;">上传视频</view>
							</view>
							<view v-if="form.vid" style="position: absolute; right: 0; top: 0; width: 30px;">
								<u-icon color="rgb(192, 196, 204)" name="close-circle-fill" style="padding: 5px;"
									@click.native.stop="() => {
									form.vid = ''
									stsProgress = 0
								}"></u-icon>
							</view>
						</view>
						<u-line-progress v-if="stsProgress" style="margin-top: 5px;" :percentage="stsProgress" activeColor="#52B36D"></u-line-progress>
					</view>
					<view style="width: 100%; font-size: 12px;">支持mp4、avi、wmv、flv、3gp、rmvb 竖屏 9:16</view>
				</view>
			</u-form-item>
			<u-form-item v-if="form.type == 2" label="上传封面" prop="vid_img" borderBottom :required="!releaseType">
				<view @click="handleVidImg">
					<view style="width: 100%; font-size: 12px;">
						<view class="Grid Grid--center Grid--justifyCenter text-center"
							style="width: 90px; height: 160px; background: #F7F7F7; position: relative;">
							<u--image v-if="form.vid_img" :showLoading="true" mode="aspectFill" :src="form.vid_img"
								width="80px" height="116px"></u--image>
							<view v-if="!form.vid_img">
								<u-icon name="plus" style="margin: 0 auto; display: inline-block;"></u-icon>
								<view style="color: #999999; padding: 4px 0;">视频封面</view>
							</view>
							<view v-if="form.vid_img" style="position: absolute; right: 0; top: 0; width: 30px;">
								<u-icon color="rgb(192, 196, 204)" name="close-circle-fill" style="padding: 5px;"
									@click.native.stop="() => {
									form.vid_img = ''
								}"></u-icon>
							</view>
						</view>
					</view>
					<view style="width: 100%; font-size: 12px;">支持jpg/png/jpeg, 竖屏 9:16 1080*1920</view>
				</view>
			</u-form-item>
			<u-form-item v-if="form.type == 2 && (form.price * 1)" label="试看时长" prop="free_duration" borderBottom :required="!releaseType">
				<u-input v-model="form.free_duration" type="text" border="none" placeholder="请输入试看时长">
					<template slot="suffix">
						秒
					</template>
				</u-input>
			</u-form-item>
			<u-form-item v-if="form.type == 1" label="付费内容" prop="content" :required="!releaseType">
				<view v-if="form.content" class="custom-scrollbar"
					style="position: relative; height: 240px; width: 260px; overflow-y: scroll; background-color: #f7f7f7; padding: 10px; border-radius: 5px;"
					@click.stop="handleEditHtml('content')">
					<!-- domain="url" -->
					<mp-html container-style="padding: 0;" :content="form.content || `请编辑付费内容`" lazy-load scroll-table
						selectable use-anchor :tag-style="tagStyle" @load="load" @ready="ready" @imgtap="imgtap"
						@linktap="linktap" />
					<view style="position: absolute; right: 0; bottom: 0; padding: 20px; color: #52B36D;">
						编辑</view>
				</view>
				<view v-else>
					<view style="width: 100%; color: #999999;" @click="handleEditHtml('content')">请编辑付费内容</view>
				</view>
			</u-form-item>
			<u-form-item v-if="form.type == 1" label=" " prop="img_main" borderBottom>
				<view style="width: 266px">
					<dragSort v-if="visible && imgMainList.length" label="id" :list.sync="imgMainList" :columnNum="3"
						:columnSpace="10" :rowHeight="160" :rowSpace="10"></dragSort>
					<view class="Grid Grid--center">
						<view
							style="width: 80px; height: 80px; background-color: #f4f5f7; border-radius: 2px; margin: 0 8px 8px 0;">
							<view style="width: 80px; height: 80px;"
								class="Grid Grid--center Grid--justifyCenter press-down-active"
								@click="imgUrlAfterRead('imgMainList')">
								<u-icon name="camera-fill" size="24"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="营销方案" borderBottom>
				<view v-if="Object.keys(settingMarket).length" class="Grid Grid--center">
					<view v-for="(value, key) in setting.market" :key="key">
						<template v-if="value.is_enable">
							<switch :checked="settingMarket[key]"
								:disabled="value.is_open || !(form.price * 1) ? true : false" color="#52B36D"
								style="transform:scale(0.7)" @change="(e) => {
								settingMarket[key] = e.detail.value
								$forceUpdate()
							}" />
							<text>{{value.title}}</text>
						</template>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">不中包赔</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">组合销售</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">好物搭桥</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">幸运转盘</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">充值免单</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">蛇年活动</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">双倍积分</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">三倍积分</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">绝杀预警</text>
					</view>
					<view>
						<switch :disabled="true" color="#52B36D" style="transform:scale(0.7)" />
						<text style="color: #CBCBCB;">异动分析</text>
					</view>
					<view v-if="!(form.price * 1)" style="color: #f56c6c;">注：方案价格免费时无法开启以上营销方案！</view>
				</view>
			</u-form-item>
			<template v-if="Object.keys(settingMarket).length && settingMarket[5] && (form.price * 1)">
				<view style="background: #F0F7F2; border-radius: 10px; padding: 12px;">
					<u-form-item label="秒杀价格" prop="seckill_price" required>
						<u--input v-model="form.seckill_price" type="digit" placeholder="请输入秒杀价格" border="none"
							style="background-color: #FFFFFF; padding: 5px;"></u--input>
					</u-form-item>
					<u-form-item label="秒杀总数" prop="seckill_stock">
						<u--input v-model="form.seckill_stock" type="number" placeholder="请输入秒杀总数" border="none"
							style="background-color: #FFFFFF; padding: 5px;"></u--input>
					</u-form-item>
					<u-form-item v-if="form.content_id" label="虚拟总数" prop="surplus_show">
						<u--input v-model="form.surplus_show" type="number" placeholder="请输入虚拟总数" border="none"
							style="background-color: #FFFFFF; padding: 5px;"></u--input>
					</u-form-item>
					<u-form-item label="结束时间" prop="seckill_expire" required>
						<view class="Grid Grid--center Grid--justifyCenter"
							style="width: 100%; background-color: #FFFFFF">
							<view class="Grid-cell">
								<view @click="seckillExpireClick"
									:style="{'height': '34px', 'line-height': '34px', 'padding': '0 5px', 'width': '100%', color: !form.seckill_expire ? '#999999' : 'initial'}">
									{{form.seckill_expire || '请选择秒杀结束时间'}}
								</view>
							</view>
							<view v-if="form.seckill_expire" style="width: 30px;">
								<view class="Grid Grid--center Grid--justifyFlexEnd">
									<u-icon color="rgb(192, 196, 204)" name="close-circle-fill" style="padding: 5px;"
										@click="() => {
										seckillExpirePickerValue = null
										form.seckill_expire = ''
									}"></u-icon>
								</view>
							</view>
						</view>
						<u-datetime-picker ref="seckillExpireRef" :show="seckillExpirePicker"
							v-model="seckillExpirePickerValue" :minDate="minDatePickerValue" mode="datetime"
							@cancel="seckillExpirePicker = false" @confirm="seckillExpireFormatter"></u-datetime-picker>
					</u-form-item>
				</view>
			</template>

			<template v-if="Object.keys(settingMarket).length && settingMarket[6]">
				<u-form-item label="图表赛程" prop="match_data" borderBottom required>
					<view>
						<view class="Grid Grid--center Grid--justifyCenter" style="width: 100%;">
							<view class="Grid-cell">
								<view style="width: 100%;" @click="show = true">{{match_data}}</view>
							</view>
							<view v-if="match_data != '请选择系统赛事'" style="width: 30px;">
								<view class="Grid Grid--center Grid--justifyFlexEnd">
									<u-icon color="rgb(192, 196, 204)" name="close-circle-fill" style="padding: 5px;"
										@click="() => {
										form.match_data = ''
										match_data = '请选择系统赛事'
									}"></u-icon>
								</view>
							</view>
						</view>
						<view v-if="!form.kuiper_data.length && settingMarket[6]"
							style="font-size: 12px;line-height: 12px;color: #f56c6c;margin-top: 4px;">本场赛事无图表分析</view>
						<view v-if="form.kuiper_data.length && settingMarket[6]"
							style="font-size: 12px;line-height: 12px;color: #f56c6c;margin-top: 4px;">
							本场赛事占比：主队{{form.kuiper_data[0].bar}}% vs 客队{{form.kuiper_data[1].bar}}%</view>
					</view>
				</u-form-item>
			</template>

			<u-form-item label="是否置顶" prop="is_top" borderBottom>
				<view class="Grid Grid--center Grid--justifyFlexEnd" style="width: 100%;">
					<switch :checked="is_top_checked" color="#52B36D" style="transform:scale(0.7)" @change="(e) => {
						is_top_checked = e.detail.value
						form.is_top = e.detail.value ? 1 : 0
					}" />
				</view>
			</u-form-item>

			<u-form-item v-if="(!form.content_id || form.draft_status) && !releaseType" label="方案状态" prop="is_top"
				borderBottom>
				<view class="Grid Grid--center" style="width: 100%; color: #222222;" @click="() => {
					schemeStatusShow = true;
				}">
					<view class="Grid-cell">{{schemeStatusMap[schemeStatus]}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>

			<u-form-item label="发布时间" prop="release_time">
				<view class="Grid Grid--center Grid--justifyCenter"
					:style="{'width': '100%', color: !form.release_time ? '#999999' : 'initial'}">
					<view class="Grid-cell">
						<view @click="releaseTimeClick">{{form.release_time || '请选择发布时间'}}</view>
					</view>
					<view v-if="form.release_time" style="width: 30px;">
						<view class="Grid Grid--center Grid--justifyFlexEnd">
							<u-icon color="rgb(192, 196, 204)" name="close-circle-fill" style="padding: 5px;" @click="() => {
								releaseTimeValue = null
								form.release_time = ''
							}"></u-icon>
						</view>
					</view>
				</view>

				<u-datetime-picker ref="releaseDatetimePicker" :show="releaseTimePicker" v-model="releaseTimeValue"
					:minDate="minDatePickerValue" mode="datetime" @cancel="releaseTimePicker = false"
					@confirm="releaseTimeFormatter"></u-datetime-picker>
			</u-form-item>
			<u-form-item v-if="!form.draft_status" label=" ">
				<view class="Media" style="width: 100%;">
					<view class="Media-body">
						<view class="Grid Grid--center Grid--justifyFlexEnd">
							<view class="Grid-cell text-sm">是否同时通知已购买的粉丝</view>
							<view>
								<switch :checked="is_push_fans_checked" color="#52B36D" style="transform:scale(0.7)"
									@change="(e) => {
										is_push_fans_checked = e.detail.value
									}" />
							</view>
						</view>
					</view>
				</view>
			</u-form-item>
		</u--form>

		<view v-if="!releaseType" class="Grid Grid--1of2 Grid--justifyFlexEnd"
			style="margin: 10px auto; padding: 0 15px 55px;">
			<view class="Grid-cell" style="padding: 0 4px; margin-bottom: 5px;">
				<u-button text="清空" shape="circle" @click="handleResetForm" :customStyle="{padding: 0}"></u-button>
			</view>
			<view v-if="!form.content_id || form.draft_status" class="Grid-cell"
				style="padding: 0 4px; margin-bottom: 5px;">
				<u-button type="primary" shape="circle" text="提交" @click="() => {
					let obj = null
					if (schemeStatus == 0) {
						form.push_fans = 0
						obj = {draft_status: 0}
					}
					if (schemeStatus == 1) {
						form.push_fans = 1
						obj = {draft_status: 0}
					}
					if (schemeStatus == 2) {
						obj = {draft_status: 1}
					}
					submit(obj)
				}" :customStyle="{padding: 0}"></u-button>
			</view>
			<view v-if="form.content_id && !form.draft_status" class="Grid-cell"
				style="padding: 0 4px; margin-bottom: 5px;">
				<u-button type="primary" shape="circle" text="保存" @click="() => {
					if (is_push_fans_checked) {
						form.push_fans = 2
					} else {
						form.push_fans = 1
					}
					submit({draft_status: 0})
				}" :customStyle="{padding: 0}"></u-button>
			</view>
		</view>
		<view v-if="releaseType" class="Grid Grid--1of2" style="margin: 10px auto; padding: 0 15px 55px;">
			<view class="Grid-cell" style="padding: 0 4px; margin-bottom: 5px;">
				<u-button text="清空" shape="circle" @click="handleResetForm" :customStyle="{padding: 0}"></u-button>
			</view>
			<view class="Grid-cell" style="padding: 0 4px;">
				<u-button type="primary" shape="circle" text="存模板" @click="() => {
					submit({draft_status: 3})
				}" :customStyle="{padding: 0}"></u-button>
			</view>
		</view>

		</u-action-sheet>
		<!-- 方案状态选择 -->
		<u-action-sheet :show="schemeStatusShow" :actions="scheme_status_list" title="请选择" description=""
			@close="schemeStatusShow = false" @select="schemeStatusSelect">
		</u-action-sheet>
		<!-- 公众号选择 -->
		<u-action-sheet :show="showWechat" :actions="wechat_list" title="请选择" description="" @close="showWechat = false"
			@select="wechatSelect">
		</u-action-sheet>
		<!-- 选择赛程 -->
		<u-popup :show="show" @close="show = false" closeable mode="right" safeAreaInsetTop>
			<view style="padding: 15px 15px 5px;">
				<view class="Grid Grid--center Grid--justifyCenter text-sm" style="margin-bottom: 5px;">
					系统赛事选择
				</view>
				<u-search placeholder="请输入关键字" v-model="keyword" shape="square" @change="() => {
					// 需要初始化入参
					options = []
					getMatch(1, 20)
				}"></u-search>
			</view>
			<view class="text-xs" style="width: 70vw; padding: 0 15px;">
				<!-- 虚拟列表 -->
				<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
				<z-paging unit="px" ref="paging" :fixed="false" :height="zPagingHeight" use-virtual-list
					@query="getMatch">
					<!-- 通过slot="cell"插入列表for循环的cell，slot-scope中提供当前for循环的item和index -->
					<!-- 因字节跳动小程序不支持slot-scope，因此不支持字节跳动小程序 -->
					<view slot="cell" slot-scope="{item,index}">
						<view class="match-box" @click="() => {
							if (!is_match_info) {
								form.match_info = item.value
								form.match_nick = item.valueJSON.home_team_info.team_name+' VS '+item.valueJSON.away_team_info.team_name
								match_info = item.label
								$refs.uForm.validateField('match_info')
								is_match_info = false
								// 赋值过期时间
								// form.expires_time = item.valueJSON.match_time
								form.expires_time = formatExpiresTime(item.match_time)
								$refs.datetimePicker.innerValue = Number(item.match_time)
								form.match_data = item.value
								match_data = item.label
							} else {
								form.match_data = item.value
								match_data = item.label
								match_info = '请选择系统赛事'
								form.match_info = ''
							}
							if (form.category_ids[0] == 3) {
								kuiperMarket({
									match_id: item.valueJSON.match_id,
									match_type: form.category_ids[0]==3?1:2
								})
							}
							show = false
						}">
							<view class="Grid" style="margin-bottom: 5px;">
								<view>
									{{item.valueJSON.competition_info.name}}
								</view>
								<view class="Grid-cell text-right">{{item.valueJSON.match_time.slice(10, 16)}}</view>
							</view>
							<view class="Grid Grid--center">
								<u--image :showLoading="true" mode="aspectFill"
									:src="item.valueJSON.home_team_info.logo" width="18px" height="18px"></u--image>
								<view>
									{{item.valueJSON.home_team_info.team_name}}
								</view>
								<view style="padding: 0 5px;">VS</view>
								<view>
									{{item.valueJSON.away_team_info.team_name}}
								</view>
								<u--image :showLoading="true" mode="aspectFill"
									:src="item.valueJSON.away_team_info.logo" width="18px" height="18px"></u--image>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</u-popup>
		<!-- 选择屏蔽的用户 -->
		<u-popup :show="invisibleShow" @close="invisibleShow = false" closeable mode="right" safeAreaInsetTop
			:customStyle="{padding: '15px 15px 5px'}">
			<view class="text-base" style="margin-bottom: 5px;">屏蔽的用户</view>
			<view class="Grid Grid--justifyCenter Grid--center">
				<view>
					<u-button :hairline="false" :icon="isQueryField ? 'arrow-up' : 'arrow-down'" plain :text="getText"
						style="border: none !important;" @click="isQueryField = true"></u-button>
				</view>
				<view class="Grid-cell">
					<u-search placeholder="请输入" v-model="invisibleKeyword" shape="square" @search="() => {}" @custom="() => {
						query.page = 1
						invisibleList = []
						getInvisibleList()
					}" style="width: 180px;"></u-search>
				</view>
			</view>
			<view class="text-xs" style="padding: 10px 0;">
				<scroll-view scroll-y="true" @scrolltolower="() => {
					getInvisibleList()
				}" style="height: 80vh;">
					<u-checkbox-group v-model="invisible_ids" placement="column" borderBottom iconPlacement="right">
						<u-checkbox v-for="(item, index) in invisibleList" activeColor="#52B36D" :label="item.text"
							:name="item.value" style="margin-bottom: 5px;"
							@change="(e) => invisibleChange(e, item)"></u-checkbox>
					</u-checkbox-group>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 用户列表筛选条件选择 -->
		<u-action-sheet :show="isQueryField"
			:actions="[{name: '会员ID', key: 'member_id'}, {name: '昵称', key: 'nickname'}]" title="请选择" description=""
			@close="isQueryField = false" @select="(e) => {
				invisibleKeyword = ''
				query = {
					nickname: '',
					member_id: '',
					wechat_id: '',
					status: 1,
					page: 1,
					limit: 20,
					not_in: []
				}
				invisibleList = []
				queryField = e.key
				getInvisibleList()
			}">
		</u-action-sheet>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import axios from 'axios'
	import {
		mapState
	} from "vuex";
	import {
		addContent,
		editContent,
		fansList,
		fileList,
		addFile,
		deleFile,
		kuiperMarket,
		getStsToken,
		getVidInfo
	} from '@/service/index.js'
	import CustomTag from './cps/custom-tag.vue';
	import emptyList from '@/static/images/my/list.png'
	import OSS from '@/static/js/aliyun-upload-sdk-1.5.6/lib/aliyun-oss-sdk-6.17.1.min'
	window.OSS = OSS;
	import '@/static/js/aliyun-upload-sdk-1.5.6/aliyun-upload-sdk-1.5.6.min'
	import {
		parseQuery
	} from '@/utils/index.js'

	export default {
		name: 'event',
		components: {
			CustomTag
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			visible() {
				this.visible && this.initData()
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				setting: state => state.login.setting
			}),
			getText() {
				if (this.queryField === 'member_id') return '会员ID'
				if (this.queryField === 'nickname') return '昵称'
			}
		},
		data() {
			return {
				emptyList,
				// 发布类型 0 方案 1 模板
				releaseType: 0,
				fileList: [],
				is_match_info: false,
				releaseTimePicker: false,
				datePicker: false,
				releaseTimeValue: null,
				datePickerValue: null,
				minDatePickerValue: dayjs().valueOf(),
				// 价格数组
				priceArray: [{
					label: '免费',
					value: 0
				}, {
					label: '88元',
					value: 88
				}, {
					label: '188元',
					value: 188
				}, {
					label: '288元',
					value: 288
				}, {
					label: '388元',
					value: 388
				}, {
					label: '488元',
					value: 488
				}, {
					label: '688元',
					value: 688
				}, {
					label: '888元',
					value: 888
				}],
				// 虚拟列表高度
				zPagingHeight: `${uni.getSystemInfoSync().windowHeight - 100}px`,
				// 赛事赛选keyword
				keyword: '',
				// 屏蔽用户invisibleKeyword
				invisibleKeyword: '',
				// 选中价格索引
				tagIndex: 3,
				// 公众号选择
				showWechat: false,
				wechat_list: [],
				// 当前选择
				currentWechat: {},
				// 选择赛程
				show: false,
				match_info: '请选择系统赛事',
				match_data: '请选择系统赛事',
				// 选择屏蔽的用户
				invisibleShow: false,
				// 赛程最小值
				matchDateStart: dayjs().format('YYYY-MM-DD'),
				// 日期map
				matchDateMap: {
					today: dayjs().format('YYYY-MM-DD'),
					tomorrow: dayjs().add(1, 'day').format('YYYY-MM-DD'),
					the_day_after_tomorrow: dayjs().add(2, 'day').format('YYYY-MM-DD'),
					custom: ''
				},
				// 方案过期时间最小值
				expires_time_start: dayjs().format('YYYY-MM-DD HH:mm:ss'),
				// 定时发布时间最小值
				releaseTimeStart: dayjs().format('YYYY-MM-DD HH:mm:ss'),
				// 表单模型
				form: {
					content_id: '', // 方案id
					// 赛程日期
					match_date: dayjs().format('YYYY-MM-DD'),
					category_ids: [3], // 类型：3 足球 4 篮球
					name: '',
					title: '', // 方案标题
					expires_time: '', // 方案过期时间
					match_info: '', // 方案关联的赛事(json)
					match_data: '', // 图标赛事(json)
					price: '288.00', // 价格
					description: '', // 方案描述
					content: '', // 方案付费内容
					is_top: 0, // 是否置顶，1是0否
					is_hot: 0, // 是否热门，1是0否
					is_rec: 0, // 是否推荐，1是0否
					is_disable: 0, // 是否禁用，1是0否
					wechat_id: '', // 方案关联公众号
					invisible_ids: [], // 屏蔽不让查看的会员id,逗号分割
					release_time: '', // 定时发布时间
					push_fans: 0, // 方案发布时是否向粉丝推送(1-推送,0-不推送)
					poster_info: 1, // 海报信息
					draft_status: 1, // 草稿状态(1-是,0-否)
					match_nick: '', //赛程名称
					url: '', // 海报背景
					img_url: '', // 方案描述图片集合,逗号分割
					market_ids: [], // 开启的营销工具
					seckill_expire: null, // 秒杀结束时间
					seckill_price: '', // 秒杀价格
					seckill_stock: '', // 秒杀总数
					surplus_show: '',
					seckill_id: '', // 秒杀id
					hits_show: '',
					img_main: '', // 正文图片集合,逗号分隔
					kuiper_data: [], //图表数据
					type: 1, // 1文章 2视频
					vid: '', // 视频id
					vid_img: '', // 视频封面地址
					free_duration: '', // 试看时长
					duration: ''

				},
				// 是否置顶
				is_top_checked: false,
				// 是否同时通知粉丝
				is_push_fans_checked: false,

				// form-label-style
				formLabelStyle: {
					fontSize: '14px',
					color: '#222222',
					paddingLeft: '12px',
				},
				// mp-html tagStyle
				tagStyle: {
					table: 'box-sizing: border-box; border-top: 1px solid #dfe2e5; border-left: 1px solid #dfe2e5;',
					th: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;',
					td: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;',
					li: 'margin: 5px 0;'
				},
				// 赛事接口配置
				matchApi: {
					// 3: 'http://goalapi.feiyanfly.com/api/match/footballMatchList',
					// 4: 'http://goalapi.feiyanfly.com/api/match/basketballMatchList'
					3: 'http://goalapidev.feiyanfly.com/api/schedule/footballMatchList',
					4: 'http://goalapidev.feiyanfly.com/api/schedule/basketballMatchList'
				},
				// 赛程集合
				options: [],
				// 分类Id
				category_ids: 3,
				// 校验规则
				rules: {
					match_date: [{
						required: true,
						message: '请选择赛程日期',
						trigger: ['change']
					}],
					title: [{
						required: true,
						message: '请输入标题',
						trigger: ['blur']
					}],
					expires_time: [{
						required: true,
						message: '请选择过期时间',
						trigger: ['change', 'blur']
					}],
					match_nick: [{
						required: true,
						message: '请完善赛事',
						trigger: ['blur']
					}],
					description: [{
						required: true,
						message: '请编辑简介',
						trigger: ['change', 'blur']
					}],
					content: [{
						required: true,
						message: '请编辑付费正文',
						trigger: ['change', 'blur']
					}],
					price: [{
						validator: (rule, value, callback) => {
							if (value === '') return false
							return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value) || value == 0;
						},
						message: '输入金额有误!',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					seckill_price: [{
						validator: (rule, value, callback) => {
							if (value === '') return false
							return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value) || value == 0;
						},
						message: '输入秒杀价格有误!',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					seckill_expire: [{
						required: true,
						message: '请选择秒杀结束时间',
						trigger: ['change', 'blur']
					}],
					match_data: [{
						required: true,
						message: '请选择图标赛程',
						trigger: ['change', 'blur']
					}],
					vid: [{
						required: true,
						message: '请上传视频',
						trigger: ['change', 'blur']
					}],
					vid_img: [{
						required: true,
						message: '请上传视频封面',
						trigger: ['change', 'blur']
					}],
					free_duration: [{
						validator: (rule, value, callback) => {
							if (value === '' || (value * 1) < 0 || (value * 1) == 0) {
								return false
							} else {
								return true
							}
							
						},
						message: '请正确输入试看时长',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				},
				// 屏蔽的用户
				invisibleList: [],
				// 粉丝查询条件
				query: {
					nickname: '',
					member_id: '',
					wechat_id: '',
					status: [1, 3],
					page: 1,
					limit: 9999,
					not_in: []
				},
				// 筛选条件选择
				isQueryField: false,
				queryField: 'nickname',
				// 选中屏蔽用户集合
				invisible_ids: [],
				// 存储历史选择赛程信息
				historyMatchInfo: {
					match_info: '',
					match_nick: '',
					label: '请选择赛程',
					expires_time: '',
					match_time: ''
				},
				imgUrlList: [],
				imgMainList: [],
				// 秒杀结束时间弹窗
				seckillExpirePicker: false,
				seckillExpirePickerValue: null,
				// 营销工具选中对象
				settingMarket: {},
				tabIndexMap: {
					0: 0,
					1: 1,
					3: 2
				},
				schemeStatus: 1,
				schemeStatusMap: {
					0: '发布',
					1: '发布并通知',
					2: '存草稿'
				},
				schemeStatusShow: false,
				scheme_status_list: [{
					name: '发布',
					value: 0
				}, {
					name: '发布并通知',
					value: 1
				}, {
					name: '存草稿',
					value: 2
				}],
				stsProgress: 0,
				uploader: null,
				statusText: '',
				uploadDisabled: true, // 开始上传
				resumeDisabled: true, // 暂停
				pauseDisabled: true, // 恢复上传
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
		created() {

		},
		mounted() {
			this.initData()
		},
		methods: {
			// 图标数据
			kuiperMarket(obj) {
				kuiperMarket(obj).then(res => {
					if (res.code == 200) {
						this.form.kuiper_data = res.data
					}
				})
			},
			async initData() {
				try {
					await this.$store.dispatch('login/marketListAction');
				} catch (error) {}
				try {
					const form = uni.getStorageSync('form');
					if (form) {
						// 判断当前form是否模板
						if (form.draft_status == 3) this.releaseType = 1;
						else this.releaseType = 0;
						if (form.draft_status == 1) {
							this.schemeStatus = 2
							if (!form.content_id) this.schemeStatus = 1
						}
						// 表单赋值
						this.form = form
						// 初始化数据
						if (this.form.match_info) {
							let v = JSON.parse(this.form.match_info)
							this.match_info =
								`赛事:${v.competition_info.name}, 主队:[${v.home_team_info.team_name}] VS 客队:[${v.away_team_info.team_name}],赛事时间：${v.match_time}`
						}
						// 初始化数据
						if (this.form.match_data) {
							let v = JSON.parse(this.form.match_data)
							this.match_data =
								`赛事:${v.competition_info.name}, 主队:[${v.home_team_info.team_name}] VS 客队:[${v.away_team_info.team_name}],赛事时间：${v.match_time}`
						}
						this.category_ids = this.form.category_ids[0]
						this.is_top_checked = this.form.is_top ? true : false
						this.is_push_fans_checked = this.form.push_fans ? true : false
						let result = this.priceArray.findIndex((item, index) => {
							return item.value * 1 === ((this.form.price || 0) * 1)
						})
						result !== -1 ? this.tagIndex = result : this.tagIndex = ''

						if (!this.form.match_info && this.form.match_nick) this.is_match_info = true

						this.imgUrlList = this.form.img_url ? this.form.img_url.split(',').map(item => {
							return {
								name: item,
								id: item
							}
						}) : []
						this.imgMainList = this.form.img_main ? this.form.img_main.split(',').map(item => {
							return {
								name: item,
								id: item
							}
						}) : []

						this.settingMarket = {}
						if (this.form.market_ids.length) {
							this.form.market_ids.forEach(item => {
								this.settingMarket[item] = true
							})
						} else {
							this.initSettingMarket()
						}

						// 营销工具 存在秒杀
						if (this.form.marketing_tools && this.form.marketing_tools[5]) {
							this.form.seckill_expire = this.form.marketing_tools[5].seckill_expire // 秒杀结束时间
							this.form.seckill_price = this.form.marketing_tools[5].seckill_price * 1 // 秒杀价格
							this.form.seckill_stock = this.form.marketing_tools[5].seckill_stock || '' // 秒杀总数
							this.form.surplus_show = this.form.marketing_tools[5].surplus_show || '' // 虚拟总数
							this.form.seckill_id = this.form.marketing_tools[5].seckill_id // 秒杀id
						}

						await this.$refs.uForm.validate()
						this.$forceUpdate()
					} else {
						// 初始化setting.market
						this.initSettingMarket()
					}

				} catch (e) {
					// error
				}
				const {
					appid
				} = parseQuery()
				let arr = []
				let currentWechatIndex = 0
				for (let i = 0; i < this.userInfo.wechat_list.length; i++) {
					arr.push({
						name: this.userInfo.wechat_list[i].title,
						wechat_id: this.userInfo.wechat_list[i].wechat_id,
						app_id: this.userInfo.wechat_list[i].app_id
					})
					if (this.userInfo.wechat_list[i].app_id == appid) {
						currentWechatIndex = i
					}
				}
				if (arr.length) {
					this.currentWechat = arr[currentWechatIndex]
					this.form.wechat_id = arr[currentWechatIndex].wechat_id
				}
				this.wechat_list = arr
			},
			initSettingMarket() {
				this.settingMarket = {}
				for (let key in this.setting.market) {
					if (this.setting.market[key].is_enable) {
						this.settingMarket[key] = this.setting.market[key].is_open ? true : false
					}
				}
				this.$forceUpdate()
			},
			// 公众号选择回调
			wechatSelect(e) {
				this.currentWechat = e
				this.form.wechat_id = e.wechat_id
				this.$refs.uForm.validateField('wechat_id')
			},
			// 选择方案状态
			schemeStatusSelect(e) {
				console.log(e.value)
				this.schemeStatus = e.value
			},
			getMatch(page, limit) {
				this.form.category_ids = [this.category_ids]
				uni.showLoading({
					title: '赛程拉取中'
				});
				axios({
					url: this.matchApi[this.form.category_ids],
					method: 'post',
					data: {
						search_day: this.form.match_date,
						page: page,
						limit: limit,
						search_text: this.keyword
					},
					headers: {
						'Content-Type': undefined
					}
				}).then((response) => {
					uni.hideLoading();
					if (response.status === 200) {
						if (response.data.code == 1) {
							this.options = response.data.data.data.map((item) => {
								let obj = {
									match_id: item.match_id,
									match_time: dayjs(item.match_time * 1000).format(
										'YYYY-MM-DD HH:mm:ss'),
									home_team_info: item.home_team,
									away_team_info: item.away_team,
									competition_info: item.competition
								}
								return {
									value: JSON.stringify(obj),
									valueJSON: obj,
									label: `赛事:${item.competition.name}, 主队:[${
				                  item.home_team.team_name
				                }] VS 客队:[${item.away_team.team_name}],赛事时间：${dayjs(
				                  item.match_time * 1000
				                ).format('YYYY-MM-DD HH:mm:ss')}`,
									match_time: item.match_time * 1000
								}
							})
							// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
							this.$refs.paging.complete(this.options);
						} else {
							this.$showToast(response.data.msg)
							// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
							// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
							// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
							this.$refs.paging.complete(false);
						}
					} else {
						this.$showToast('网络异常')
						// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
						// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
						// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
						this.$refs.paging.complete(false);
					}
				}).catch(error => {
					uni.hideLoading();
				})
			},
			// mp-html 事件
			load() {
				console.log('dom 树加载完毕')
			},
			ready(e) {
				console.log('ready 事件触发：', e)
			},
			imgtap(e) {
				console.log('imgtap 事件触发：', e)
			},
			linktap(e) {
				console.log('linktap 事件触发：', e)
			},
			// 富文本编辑
			handleEditHtml(key) {
				try {
					this.form.img_url = this.imgUrlList.map(item => {
						return item.id
					}).join(',')
					this.form.img_main = this.imgMainList.map(item => {
						return item.id
					}).join(',')
					// 将选中的营销工具赋值
					this.form.market_ids = this.settingMarketFormat()
					uni.setStorageSync('form', this.form);
				} catch (e) {
					// error
				}
				uni.navigateTo({
					// url: `/pages/index/edit-html/index?appid=${this.userInfo.appid}&key=${key}`
					url: `/pages/index/editor-html/index?appid=${this.userInfo.appid}&key=${key}`
				})
			},
			async submit(obj) {
				try {
					if (!obj.draft_status || obj.draft_status == 1) await this.$refs.uForm.validate()
					
					if (this.form.type == 2) {
						const result = await getVidInfo({
							vid: this.form.vid
						})
						if (result.code === 200) {
							console.log(result.data)
							if(!Object.keys(result.data).length || !result.data.duration) {
								return this.$showToast('视频解析中，静等几秒后再点提交~')
							} else {
								if ((this.form.free_duration * 1) > result.data.duration || (this.form.free_duration * 1) == result.data.duration) {
									return this.$showToast('视频试看时长不可大于或等于视频总时长')
								} else {
									this.form.duration = result.data.duration
								}
							}
						}
					}
					
					if (!obj.draft_status && !(this.form.price * 1)) {
						uni.showModal({
							content: '方案价格免费,是否发布?',
							success: (res) => {
								if (res.confirm) {
									this.submitConfirm(obj)
								} else if (res.cancel) {}
							}
						});
					} else {
						this.submitConfirm(obj)
					}
				} catch (e) {}
			},
			async submitConfirm(obj) {
				this.form.draft_status = obj.draft_status
				this.form.name = this.form.title
				this.form.img_url = this.imgUrlList.map(item => {
					return item.id
				}).join(',')
				this.form.img_main = this.imgMainList.map(item => {
					return item.id
				}).join(',')
				// 将选中的营销工具赋值
				this.form.market_ids = !(this.form.price * 1) ? [] : this.settingMarketFormat()
				if (this.form.content_id) {
					const result = await editContent(this.form)
					if (result.code == 200) {
						uni.showToast({
							title: '操作成功!',
							icon: 'none'
						})
						uni.$emit('tabbarIndexUpdate', {
							tabbarIndex: 0,
							tabIndex: this.tabIndexMap[this.form.draft_status]
						})
					}
				} else {
					const result = await addContent(this.form)
					if (result.code == 200) {
						uni.showToast({
							title: '操作成功!',
							icon: 'none'
						})
						uni.$emit('tabbarIndexUpdate', {
							tabbarIndex: 0,
							tabIndex: this.tabIndexMap[this.form.draft_status]
						})
					}
				}
				this.resetForm()
			},
			settingMarketFormat() {
				let arr = []
				for (let key in this.settingMarket) {
					if (this.settingMarket[key]) arr.push(key * 1)
				}
				return arr
			},
			// 重置表单
			resetForm() {
				this.form = {
					content_id: '', // 方案id
					// 赛程日期
					match_date: dayjs().format('YYYY-MM-DD'),
					category_ids: [3], // 类型：3 足球 4 篮球
					name: '',
					title: '', // 方案标题
					expires_time: '', // 方案过期时间
					match_info: '', // 方案关联的赛事(json)
					match_data: '', // 图表赛程(json)
					kuiper_data: [], //图表数据
					price: '288.00', // 价格
					description: '', // 方案描述
					content: '', // 方案付费内容
					is_top: 0, // 是否置顶，1是0否
					is_hot: 0, // 是否热门，1是0否
					is_rec: 0, // 是否推荐，1是0否
					is_disable: 0, // 是否禁用，1是0否
					wechat_id: '', // 方案关联公众号
					invisible_ids: [], // 屏蔽不让查看的会员id,逗号分割
					release_time: '', // 定时发布时间
					push_fans: 0, // 方案发布时是否向粉丝推送(1-推送,0-不推送)
					poster_info: 1, // 海报信息
					draft_status: 1, // 草稿状态(1-是,0-否)
					match_nick: '',
					url: '',
					img_url: '',
					market_ids: [],
					seckill_expire: null, // 秒杀结束时间
					seckill_price: '', // 秒杀价格
					seckill_stock: '', // 秒杀总数
					surplus_show: '',
					seckill_id: '', // 秒杀id
					hits_show: '',
					img_main: '',
					type: 1, // 1文章 2视频
					vid: '', // 视频id
					vid_img: '', // 视频封面地址
					free_duration: '', // 试看时长
					duration: ''
				}
				this.tagIndex = 3
				this.invisibleKeyword = ''
				this.match_info = '请选择系统赛事'
				this.match_data = '请选择系统赛事'
				this.is_top_checked = false
				this.is_push_fans_checked = false
				this.options = []
				this.currentWechat = this.wechat_list.length ? this.wechat_list[0] : {}
				this.form.wechat_id = this.wechat_list.length ? this.wechat_list[0].wechat_id : ''
				this.invisible_ids = []
				this.invisibleList = []
				this.historyMatchInfo = {
					match_info: '',
					match_nick: '',
					label: '请选择系统赛事',
					expires_time: '',
					match_time: ''
				}
				this.imgUrlList = []
				this.imgMainList = []
				this.initSettingMarket()
				this.schemeStatus = 1
				// 操作完成清除表单简介以及正文内容
				try {
					uni.removeStorageSync('form');
				} catch (e) {
					// error
				}
				this.$refs.uForm.clearValidate()
			},
			async getInvisibleList() {
				// 拼查询条件
				if (this.invisibleKeyword) {
					this.query[this.queryField] = this.invisibleKeyword
				} else {
					this.query[this.queryField] = ''
				}
				// 初始化this.invisible_ids
				let v = []
				for (let i = 0; i < this.form.invisible_ids.length; i++) {
					v.push(JSON.stringify(this.form.invisible_ids[i]))
				}
				this.invisible_ids = v
				this.query.wechat_id = this.currentWechat.wechat_id
				const result = await fansList(this.query)
				if (result.code === 200) {
					let arr = []
					for (let i = 0; i < result.data.list.length; i++) {
						arr.push({
							text: `ID:${result.data.list[i].member_id},${result.data.list[i].nickname}`,
							value: JSON.stringify(result.data.list[i])
						})
					}
					this.invisibleList = this.invisibleList.concat(arr)
					this.query.page++
				}
			},
			invisibleChange(e, item) {
				if (e) {
					this.form.invisible_ids.push(JSON.parse(item.value))
				} else {
					// 过滤掉取消勾选的项
					this.form.invisible_ids = this.form.invisible_ids.filter(v => v.member_id !== JSON.parse(item.value)
						.member_id)
				}
				this.$forceUpdate()
			},
			removal(arr, key) {
				for (var i = 0; i < arr.length - 1; i++) {
					for (var j = i + 1; j < arr.length; j++) {
						if (arr[i][key] == arr[j][key]) {
							arr.splice(j, 1)
							//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
							j--
						}
					}
				}
				return arr
			},
			datetimeFormatter(e) {
				this.form.expires_time = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.datePicker = false
			},
			releaseTimeFormatter(e) {
				this.form.release_time = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.releaseTimePicker = false
			},
			expiresTimeClick() {
				this.datePicker = true
				this.$refs.datetimePicker.innerValue = this.form.expires_time ? dayjs(this.form.expires_time).valueOf() :
					dayjs().valueOf()
			},
			releaseTimeClick() {
				this.releaseTimePicker = true
				this.$refs.releaseDatetimePicker.innerValue = this.form.release_time ? dayjs(this.form.release_time)
					.valueOf() : dayjs().valueOf()
			},
			// 方案简介图片
			imgUrlAfterRead(type) {
				uni.chooseImage({
					sizeType: 'compressed',
					count: 9, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
					success: async res => {
						uni.showLoading({
							title: '上传中'
						});
						const arr = []
						// for (let item of res.tempFilePaths) {
						// 	// 依次上传
						// 	const src = await upload(item, type)
						// 	arr.push(src)
						// }
						for (let file of res
								.tempFiles) {
							// 依次上传
							const result =
								await addFile({
									// #ifdef H5 || APP-PLUS
									timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
									// #endif
									file: file,
									name: 'file',
									formData: {}
								})
							if (result.code ===
								200) {
								arr.push({
									name: result.data.file_url,
									id: result.data.file_url
								})
							}
						}
						this[type] = this[type].concat(arr)
					},
					fail: res => {
						console.log(res)
					}
				})
			},
			// 过期时间为当前选择赛事延后一个小时
			formatExpiresTime(e) {
				return dayjs(e).add(1, 'hour').format('YYYY-MM-DD HH:mm:ss')
			},
			seckillExpireClick() {
				this.seckillExpirePicker = true
				this.$refs.seckillExpireRef.innerValue = this.form.seckillExpire ? dayjs(this.form.seckill_expire)
					.valueOf() :
					dayjs().valueOf()
			},
			seckillExpireFormatter(e) {
				this.form.seckill_expire = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.seckillExpirePicker = false
			},
			handleResetForm() {
				uni.showModal({
					content: '是否清空当前方案数据?',
					success: (res) => {
						if (res.confirm) {
							this.resetForm()
						} else if (res.cancel) {}
					}
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.releaseType = index;
				this.form.type = 1
				if (this.releaseType) {
					this.form.draft_status = 3
				}
			},
			createUploader() {
				let self = this
				let uploader = new AliyunUpload.Vod({
					timeout: 60000,
					partSize: Math.round(1048576),
					parallel: 5,
					retryCount: 3,
					retryDuration: 2,
					region: 'cn-shenzhen',
					userId: `user_${self.userInfo.user_id}`,
					localCheckpoint: true, //此参数是禁用服务端缓存
					// 添加文件成功
					addFileSuccess: function(uploadInfo) {
						self.uploadDisabled = false
						self.resumeDisabled = false
						self.statusText = '添加文件成功, 等待上传...'
						console.log("addFileSuccess: " + uploadInfo.file.name)
						self.stsUpload()
					},
					// 开始上传
					onUploadstarted: async function(uploadInfo) {
						console.log(">>>")
						console.log(uploadInfo)
						// 如果是 STSToken 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
						// 用户需要自己获取 accessKeyId, accessKeySecret,secretToken
						const result = await getStsToken({})
						if (result.code === 200) {
							console.log(result.data)
							uploader.setSTSToken(uploadInfo, result.data.AccessKeyId, result.data.AccessKeySecret, result.data.SecurityToken)
						}
						self.statusText = '文件开始上传...'
						uni.showToast({
							title: '视频上传中,请耐心等待',
							icon: 'none',
							duration: 3000
						});
						console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo
							.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
					},
					// 文件上传成功
					onUploadSucceed: async function(uploadInfo) {
						// console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo
						// 	.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
						console.log("上传成功：", uploadInfo)
						self.form.vid = uploadInfo.videoId
						self.statusText = '文件上传成功!'
						uni.showToast({
							title: '视频上传成功！',
							icon: 'none',
							duration: 3000
						});
						// uni.hideLoading()
					},
					// 文件上传失败
					onUploadFailed: function(uploadInfo, code, message) {
						console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code +
							", message:" + message)
						self.statusText = '文件上传失败!'
						uni.showToast({
							title: '视频上传失败！',
							icon: 'none',
							duration: 3000
						});
					},
					// 取消文件上传
					onUploadCanceled: function(uploadInfo, code, message) {
						console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code +
							", message:" + message)
						self.statusText = '文件已暂停上传'
					},
					// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
					onUploadProgress: function(uploadInfo, totalSize, progress) {
						console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" +
							totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
						let progressPercent = Math.ceil(progress * 100)
						self.stsProgress = progressPercent
						self.statusText = '文件上传中...'
					},
					// 上传凭证超时
					onUploadTokenExpired: async function(uploadInfo) {
						// uni.hideLoading()
						// 如果是上传方式二即根据 STSToken 实现时，从新获取STS临时账号用于恢复上传
						// 上传文件过大时可能在上传过程中 sts token 就会失效, 所以需要在 token 过期的回调中调用 resumeUploadWithSTSToken 方法
						const result = await getStsToken({})
						if (result.code === 200) {
							console.log(result.data)
							uploader.resumeUploadWithSTSToken(result.data.AccessKeyId, result.data.AccessKeySecret, result.data.SecurityToken, result.data.Expiration)
						}
						self.statusText = '文件超时...'
						uni.showToast({
							title: '视频上传超时！',
							icon: 'none',
							duration: 3000
						});
					},
					// 全部文件上传结束
					onUploadEnd: function(uploadInfo) {
						console.log("onUploadEnd: uploaded all the files")
						self.statusText = '文件上传完毕'
						// uni.hideLoading()
					}
				})
				console.log(uploader)
				return uploader
			},
			// 开始上传
			stsUpload() {
				// 然后调用 startUpload 方法, 开始上传
				if (this.uploader !== null) {
					this.uploader.startUpload()
					this.uploadDisabled = true
					this.pauseDisabled = false
				}
			},
			// 暂停上传
			pauseUpload() {
				if (this.uploader !== null) {
					this.uploader.stopUpload()
					this.resumeDisabled = false
					this.pauseDisabled = true
				}
			},
			// 恢复上传
			resumeUpload() {
				if (this.uploader !== null) {
					this.uploader.startUpload()
					this.resumeDisabled = true
					this.pauseDisabled = false
				}
			},
			handleVid() {
				let self = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					extension: ['mp4', 'avi', 'wmv', 'flv', '3gp', 'rmvb'],
					compressed: false,
					maxDuration: 120,
					success: async function(res) {
						console.log(res.tempFile)
						let _is = self.checkFileSize(res.tempFile, 100)
						if (!_is) return uni.showToast({
							title: `文件大小超过限制（最大: 100MB）`,
							icon: 'none',
							duration: 3000
						});
						if (self.uploader) {
							self.uploader.stopUpload()
							self.authProgress = 0
							self.statusText = ""
						}
						self.uploader = self.createUploader()
						let paramData = {"Vod":{}}
						paramData.Vod['FileName'] = res.tempFile.name.split('.')[1]
						paramData.Vod['Title'] = res.tempFile.name
						paramData.Vod['CateId'] = process.env.NODE_ENV === 'development' ? 13697 : 13698
						self.uploader.addFile(res.tempFile, null, null, null, JSON.stringify(paramData))
						self.uploadDisabled = false
						self.pauseDisabled = true
						self.resumeDisabled = false
					},
					fail: function(res) {
						console.log(res)
					}
				});
			},
			handleVidImg() {
				uni.chooseImage({
					sizeType: 'compressed',
					count: 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
					success: async res => {
						uni.showLoading({
							title: '上传中'
						});
						for (let file of res
								.tempFiles) {
							// 依次上传
							const result =
								await addFile({
									// #ifdef H5 || APP-PLUS
									timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
									// #endif
									file: file,
									name: 'file',
									formData: {
										group_id: 3
									}
								})
							if (result.code === 200) {
								this.form.vid_img = result.data.file_url
							}
						}
					},
					fail: res => {
						console.log(res)
					}
				})
			},
			checkFileSize(file, maxSize) {
			  // 将文件大小转换为字节
			  const maxSizeBytes = maxSize * 1024 * 1024; // 假设maxSize是以MB为单位的
			  if (file.size > maxSizeBytes) {
			    alert(`文件大小超过限制（最大: ${maxSize}MB）`);
			    return false;
			  }
			  return true;
			}
		}
	}
</script>

<style>
	::v-deep .input-placeholder {
		color: #999999 !important;
		font-size: 14px;
	}
</style>
<style lang="scss" scoped>
	::v-deep uni-switch[disabled] .uni-switch-input {
		opacity: .5 !important;
	}

	.custom-form {
		background: #FFFFFF;
		border-radius: 4px;
		padding: 10px 15px 25px 15px;
	}

	.poster-box {
		&-item {
			cursor: pointer;
			margin-right: 5px;
			margin-bottom: 5px;
		}

		&-item.active {
			border: 2px dashed #578bd6;
			padding: 2px;
		}
	}

	.match-box {
		padding: 5px;
		border-bottom: 1px solid rgb(214, 215, 217);

		&:active {
			background-color: rgb(214, 215, 217);
		}
	}

	.popup {
		padding: 0 16px;

		.close-popup {
			height: 56px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: 14px;
			color: #000000;
			line-height: 24px;

			&>image {
				position: absolute;
				left: 0;
			}
		}

		.bj-color {
			width: 100%;
			height: 48px;
			background: linear-gradient(270deg, #FE7B45 0%, #FB541D 100%);
			font-size: 14px;
			color: #FFF0ED;
			line-height: 48px;
			text-align: center;
			border-radius: 800px;
			margin: 10px 0 6px;
		}
	}

	::v-deep .z-tabs-item {
		padding: 0;
	}

	::v-deep .z-tabs-item-title-container {
		width: 100%;
	}

	.custom-select-btn {
		.item {
			width: 65px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background-color: #FFFFFF;
			color: #666666;
			border: 1px solid #C9C9C9;
			border-radius: 5px;
			margin-right: 10px;
			box-sizing: content-box;
		}

		.item.active {
			background-color: #52B36D;
			color: #FFFFFF;
			border: 1px solid #52B36D;
		}
	}

	::v-deep .u-form-item__body__left__content__required {
		left: 0;
	}

	::v-deep .u-textarea {
		padding: 0;
	}

	::v-deep .u-textarea__field {
		color: #222222;
	}
</style>